<template>
    <div class="app-container">
        <component  :is="pipelineNetworkComponent"  />
        <EquipmentThree @loadingFinish="loadingFinish" />
    </div>
</template>

<script setup name="Equipment">
import { ref } from 'vue';
import EquipmentThree from '@/components/EquipmentThree';

const pipelineNetworkComponent = ref()
const loadingFinish = async () => {
    const component = await import('@/components/Equipment');
    pipelineNetworkComponent.value = component.default;
}


import { useRouter } from 'vue-router';
import useTagsViewStore from '@/store/modules/tagsView'

const route = useRoute()
const tagsViewStore = useTagsViewStore()
const isActivated = ref(false)

// 方法1：通过store和meta判断
const isCachedByConfig = computed(() => {
  return route.name && tagsViewStore.cachedViews.includes(route.name)
})
// 综合判断
const isCurrentCached = computed(() => {
  return isCachedByConfig.value && isActivated.value
})

const homePageComponent = ref()
// 跳转
const router = useRouter();
const nextRouyter = (path) => {
    router.push({
        path,
        query: { id: 1 }
    })
}

console.log('当前页面是否被缓存:', isCurrentCached.value)
</script>
<style scoped>
.app-container{
    padding: 0 !important;
    position: relative;
    overflow: hidden;
}

</style>